<template>
	<view id="userplayer">
		<statusBar></statusBar>
		<view style="height: 44px;">
			<uni-nav-bar left-icon="back" title="云龙湖旅游景区录音"></uni-nav-bar>
		</view>
		<!-- <view style="height:10px;background-color: #f2f2f2;"></view> -->
		<view class="pl_info" style="height: 220px;">
			<view class="uni-padding-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper" :indicator-dots="true" :autoplay="false" indicator-active-color="#27B28B">
							<swiper-item>
								<view class="swiper-item"><img src="../../../../static/img/home/banner1.png" /></view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item"><img src="../../../../static/img/home/banner2.png" /></view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item"><img src="../../../../static/img/home/banner3.png" /></view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>
		<view class="pl_word">
			各位旅客，我们现在位于云龙湖景区。云龙湖风景区总面积为11.4平方公里，周围山林面积为5.6平方公里，云龙湖水面面积为5.8平方公里，一湖波光浩渺，三面青山叠翠，形成了三面环山一面水的自然景色。若沿湖而行，岸草如茵，柳绿花红，四月新春，桃红绽放，柳抽新绿;到了仲夏，南岸一塘荷花刚刚开罢，石榴树上又是花红似火;时至深秋，虽有缤纷落叶，也有漫山红遍的枫林;到了严冬，一场雪，四野皑皑，更显这一湖碧波和几点红梅生意盎然。
			    云龙湖在古代是一片洼地。古徐州志记载：“城南九里许东西各有一山，因形似簸箕，俗称簸箕洼”洼久成湖，明万历年间因湖水经常泛滥成灾，做石狗以镇之，所以又有了石狗湖的名称。1963年正式改名为云龙湖。
			 “如能引上游丁塘之水，则此湖俨若西湖，而徐州俨若杭州。”这是早在900多年前，北宋大文豪苏东坡在任徐州知州时，站在云龙山上，对着脚下这个小小的湖泊“突发奇想”。可能苏轼本人也不会想到，时隔900年之后，他的想象变成了现实：1994年，杭州西湖和徐州云龙湖结为姊妹湖。
			    杭州西湖有条苏堤，徐州也有苏堤，只不过不在湖中，而是徐州城中的一条道路。那时苏东坡刚到徐州赴任，黄河决口，徐州被百年不遇的大洪水围困了70多天。后来苏东坡筑堤治洪，水退了，这条苏堤就成了城中的一条大道保留至今，
			                        
		</view>
		<view>
			<imt-audio continue :src="audio[now].src" :duration="audio[now].duration" :control="false" color="#27B28B"></imt-audio>
			
		</view>
	</view>
</template>

<script>
	import statusBar from "@/components/status-bar.vue"
	import imtAudio from 'components/imt-audio/imt-audio'
	export default {
		data() {
			return {
				audio: [{
						src: 'http://mouyizhan.com/1.mp3',//路径
						duration: 212//时长
					}],
				now: 0
			}
		},
		components: {
			statusBar,
			imtAudio
		}
	}
</script>

<style scoped>
	page{
		background: #f5f5f5;
	}
	.content {
		padding: 20upx;
	}
	#userplayer{
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background: #f5f5f5;
		height: 100vh;
	}
	.list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30upx;
		background: #fff;
		border-radius: 10upx;
		margin-top: 20upx;
		color: #333;
	}

	.list-title {
		font-size: 28upx;
		line-height: 88upx;
	}

	.list-pic {
		display: none;
		width: 28upx;
		height: 28upx;
	}

	.active {
		background: #169af3;
		color: #fff;
	}

	.active .list-pic {
		display: block;
	}
	.pl_info{
		text-align: center;
		margin-top: 5px;
	}
	.pl_info img{
		width:305px;
		height:220px;
		/* border: 1px solid red; */
	}
	.pl_word{
		flex: 1;
		overflow: scroll;
		font-size: 14px;
		color:rgba(102,102,102,1);
		padding: 13px 17px;
		background: white;
		text-align: left;
		letter-spacing: 2px;
	}
	.content{
		position: fixed;
		bottom: 0;
		width: 95%;
	}
	.pl_info >>> .swiper{
		height:220px !important;;
	}
	
</style>